<template>
  <!-- 头部导航 -->
  <Head></Head>
  <!-- 搜索导航 -->
  <Search />
  <div class="container">
    <div class="center">
      <div class="Collection">
        <div class="Collection-font">
          <span class="iconfont icon-shoucang"></span>
          <div>我的收藏</div>
        </div>
      </div>
      <!--  -->
      <div class="content">
        <div class="collect-header" v-if="!goods.length">
          <div class="empty">
            <h2>您的收藏还是空的！</h2>
            <p>快去购物吧！</p>
          </div>
        </div>
        <!-- 商品 -->
        <div class="commodity" v-else>
          <div
            class="commodity-myList"
            v-for="(item, i) in goods"
            :key="item.product_id"
          >
            <p
              style="cursor: pointer; margin-bottom: 15px"
              @click.stop="del(item.product_id, i)"
            >
              x
            </p>
            <router-link :to="`detail?id=${item.product_id}`">
              <img
                :src="`http://101.132.181.9:3000/${item.product_picture}`"
                alt=""
              />
              <div class="commodity-List">
                <span style="margin: 25px 10px 0">
                  {{ item.product_name }}
                </span>
                <span style="margin: 5px 10px; height: 18px; font-size: 12px">
                  {{ item.product_title }}
                </span>
              </div>
              <p style="color: #ff6700">
                {{ item.product_selling_price }}

                <span class="product">
                  {{ item.product_price }}
                </span>
              </p>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script lang="ts">
import { ref, Ref } from "@vue/reactivity";
import { useAppStore } from "../store/user";
import { getCollect, deleteCollect } from "../api/collect";
export default {
  name: "collect",
};
</script>

<script lang="ts" setup>
const appStore = useAppStore();

const goods: Ref<Array<any>> = ref([]);
const init = () => {
  getCollect(appStore.user_id).then((res: any) => {
    console.log("res", res);
    goods.value = res.collectList;
  });
};
init();

const del = (id, i) => {
  deleteCollect(appStore.user_id, id);
  goods.value.splice(i, 1);
};
</script>

<style lang="less" scoped>
.commodity {
  margin-left: 135px;
  display: flex;
  /* 默认值 从左向右排列 */
  flex-wrap: wrap;
  // justify-content: space-between;
}
.commodity-myList:hover {
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
.commodity-myList {
  width: 238px;
  height: 280px;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid gainsboro;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
  .product {
    text-decoration: line-through;
    color: #b0b0b0;
    margin-left: 0.5em;
  }
}
.commodity-List span {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  font-size: 14px;
  color: #333;
}
.Collection {
  width: 100%;
  height: 64px;
  line-height: 64px;
  border-bottom: 3px solid #ff6700;
}
.icon-shoucang {
  color: red;
  font-size: 30px;
}
.Collection-font {
  display: flex;
  /* 默认值 从左向右排列 */
  flex-wrap: wrap;
  div {
    margin-left: 15px;
    font-size: 30px;
  }
}
.content {
  background-color: #f7f7f7;
}
.empty {
  height: 300px;
  padding: 0 0 130px 558px;
  background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
  color: #b0b0b0;
  overflow: hidden;
  h2 {
    margin: 70px 0 15px;
    font-size: 36px;
  }
  p {
    margin: 0 0 20px;
    font-size: 20px;
  }
}
</style>
